import { TagField } from "./TagField";
import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import { Button, Form } from "antd";
import React, { useMemo, useState } from "react";
import FilterType from "./FilterType";
import styles from "./index.module.less";
import { GOODS_LABEL } from "@/views/utils/constant";

/**
 * 包含标签弹窗
 * @param {*} props
 * @returns
 */
const IncludeTagModal = props => {
	const { visible, onVisibleChange, onChange, value = {} } = props;
	const [form] = Form.useForm();

	const [commitSearch, setCommitSearch] = useState(value);
	const [tagList, setTagList] = useState([]);

	const triggerChange = changedValue => {
		onChange?.({ ...value, ...changedValue });
	};
	const labelColorMap = {};
	const includeTagText = useMemo(() => {
		// const connector = commitSearch?.isLabelOr === true ? "," : "&";
		const connector = ","
		if (commitSearch?.containLabelIdArr?.length > 0) {
			return GOODS_LABEL.filter(item => commitSearch?.containLabelIdArr?.includes(item.id))
				.map(item => labelColorMap[item.name] || item.name)
				.join(connector);
		} else {
			return "";
		}
	}, [tagList, commitSearch]);

	const initialValues = commitSearch;

	return (
		<CommonModal
			width={840}
			title={{
				title: "商品标签"
			}}
			open={visible}
			onCancel={e => {
				onVisibleChange?.(false);
				setCommitSearch(value);
				form.setFieldValue("containLabelIdArr", value?.containLabelIdArr);
				form.setFieldValue("isLabelOr", value?.isLabelOr);
			}}
			footer={
				<div className={styles.footer}>
					<div></div>
					<div>
						<Button
							onClick={e => {
								onVisibleChange?.(false);
								setCommitSearch(value);
								form.setFieldValue("containLabelIdArr", value?.containLabelIdArr);
								form.setFieldValue("isLabelOr", value?.isLabelOr);
							}}
						>
							取消
						</Button>
						<Button
							type="primary"
							onClick={e => {
								onVisibleChange?.(false);
								triggerChange?.({ ...commitSearch, includeTagText });
							}}
						>
							保存
						</Button>
					</div>
				</div>
			}
		>
			<CommonForm
				formProps={{
					onValuesChange(changedValues, values) {
						setCommitSearch(values);
					},
					form,
					initialValues
				}}
				columns={[
					{
						slot: <FilterType />
					},
					{
						slot: <TagField filterable={true} setTagList={setTagList} fieldKey={"containLabelIdArr"} />
					}
				]}
			/>
		</CommonModal>
	);
};
export default IncludeTagModal;
